<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import form from '../widget.form.js'
  import input from '../widget.form.input.js'
  import pub from '../widget.pub.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'CheckboxGroup',
        remark: '复选框组合',
        deprecate: 'placeholder,current,model-value / v-model',
        extends: [form, input, pub],
        attrs: [{
          name: 'min-size',
          remark: '最少选择项数。数字或<var>{value,text}</var>',
          type: 'Number / Object',
          option: '<div><var>value</var>: Number</div><div><var>text</var>: 验证提示内容</div>',
        }, {
          name: 'max-size',
          remark: '最多选择项数。数字或<var>{value,text}</var>',
          type: 'Number / Object',
          option: '<div><var>value</var>: Number</div><div><var>text</var>: 验证提示内容</div>',
        }, {
          name: 'vertical',
          remark: '是否纵向排列',
          type: 'Boolean',
          option: '',
        }, {
          name: 'gap',
          remark: '子节点的间隔大小',
          type: 'Number',
          option: '',
        }, ],
        slots: [{
          name: 'default',
          remark: '复选框集合',
          option: 'w-checkbox'
        }],
        examples: [{
          remark: '范例',
          type: 'html',
          view: true,
          code: `
            <w-checkboxgroup :label="{text: '爱好:'}">
              <w-checkbox name="interest" value="1" text="音乐"></w-checkbox>
              <w-checkbox name="interest" value="2" text="美术"></w-checkbox>
              <w-checkbox name="interest" value="3" text="体育"></w-checkbox>
            </w-checkboxgroup>
            `
        },{
          remark: '选项后面跟随表单',
          type: 'html',
          view: true,
          code: `
            <w-checkboxgroup :label="{text: '爱好:'}" :vertical="true" gap="10">
              <w-checkbox name="interest" value="1" text="音乐">
                <w-text name="music"></w-text>
              </w-checkbox>
              <w-checkbox name="interest" value="2" text="美术">
                <w-text name="art"></w-text>
              </w-checkbox>
              <w-checkbox name="interest" value="3" text="体育">
                <w-text name="sport"></w-text>
              </w-checkbox>
            </w-checkboxgroup>
            `
        },]
      }
    }
  }
</script>

<style>
</style>
